<template>
    <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="415" :height="500" :left="10" :top="60">
        <div class="box">
            <!-- 功能按钮 -->
            <div class="cimrts-panel">
                <MainMenuList :menuList="forestMenuList" @clickComponent="addComponent"
                    :isDisabled="!isESForestServiceRef" />
            </div>
            <!-- scenetree -->
            <div class="cimrts-scenetree" @click="whiteSpaceClick">
                <div class="tree-content">
                    <SceneTree :sceneTreeWrapper="forestSceneTreeWrapper"></SceneTree>
                </div>
                <div class="submit">
                    <el-button @click.stop="submit"> 提交</el-button>
                </div>
            </div>
            <!-- 基础信息 -->
            <div class="cimrts-info">
                <div class="item1">
                    <div class="key">服务地址:</div>
                    <el-input type="text" v-model.lazy="url" @blur="esForestUrlRef = url"
                        @keydown.enter="esForestUrlRef = url" />
                </div>
            </div>
        </div>
    </Dialog>
    <component v-for="item in menuListRef" :key="item.id" :is="item.com" :comInfo="item" @cancel="removeComponent">
    </component>

    <TooltipCom v-if="currentDialog == 'submit'" :content="'点击提交之后，会将所有正在编辑的对象提交到服务端处理，请稍等。'" :title="'提交'"
        :isVisible="true" @close="currentDialog = undefined" @confirm="submitConfirm" />

    <!-- 添加树 编辑窗口 -->
    <AddTreePropPanel v-if="forestPropSceneTree && (forestPropSceneTree.propType == 'addTree' || forestPropSceneTree.propType == 'editTree')"
        :title="forestPropSceneTree ? forestPropSceneTree.sceneObject.name : '编辑面板'" :sceneObject="forestPropSceneTree.sceneObject"
        @cancel="objm.forestPropSceneTree = undefined"> </AddTreePropPanel>
</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { MenuItem } from "@/scripts/dataTypes";
import { ESForest } from "@/scripts/esobjs/ESForest";
import { getProjectManager } from "@/scripts/getProjectManager";
import { onBeforeUnmount, ref, watch } from "vue";
import SceneTree from "@/components/sceneTree/SceneTree.vue";
import { ElMessage } from "element-plus";
import MainMenuList from "@/components/common/MainMenuList.vue";
import { forestMenuList } from "@/scripts/menu/forest/forestMenuList";
import {
    createVueDisposer,
    toVR,
} from "vue-xe2-plugin/dist-node/components/xe2/tools";
import TooltipCom from "@/components/common/TooltipCom.vue";
import AddTreePropPanel from "@/components/propPanel/forest/AddTreePropPanel.vue";

const props = withDefaults(defineProps<{ comInfo: MenuItem }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel", props.comInfo.id);
};
new ESForest();

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();
const forestSceneTreeWrapper = objm.forestSceneTreeWrapper
const eSForestManager = objm.eSForestManager
const forestPropSceneTree = toVR<any>(d, [objm, "forestPropSceneTree"])

const menuListRef = ref<any[]>([]);


// 服务地址
const esForestUrlRef = toVR<string>(d, [eSForestManager, "esForestUrl"]);
// 是不是Cimrts服务
const isESForestServiceRef = toVR<boolean>(d, [eSForestManager, "isESForestService"]);
const url = ref("");
watch(esForestUrlRef, () => {
    url.value = esForestUrlRef.value
}, { immediate: true })


// 添加组件
const addComponent = async (item: any) => {

    if (item.id == "location") {
        eSForestManager.eSForest.flyTo();
        return;
    }
    if (item.id == "flyToTree") {
        eSForestManager.flyToRandomTree()
        return;
    }
    if (item.id == "refresh") {
        eSForestManager.refresh();
        return;
    }
    item.status != "active" ? item.status = "active" : item.status = "none";
    if (item.status == "active") {
        menuListRef.value = [item];
    }

    else {
        removeComponent(item.id)
    }
};

// 删除组件
const removeComponent = (id: string) => {
    menuListRef.value = menuListRef.value.filter((i) => i.id !== id);
    const item = forestMenuList.value.find((i: any) => i.id === id) as any;
    item.status = "none"
};

// 点击空白
const whiteSpaceClick = () => {
    console.log("点击空白");
    forestSceneTreeWrapper?.sceneUiTree.clearAllSelectedItems()
    objm.propUiTreeManager.sceneObject = undefined;
}

const currentDialog = ref<undefined | string>(undefined);

// 提交
const submit = () => {
    const c = forestSceneTreeWrapper?.json.root.children
    if (c && c.length > 0) {
        currentDialog.value = "submit"
    } else {
        ElMessage({
            message: "没有待提交的对象",
            type: "warning",
        })
    }
}

// 提交 确定按钮
const submitConfirm = async () => {
    console.log("提交", forestSceneTreeWrapper?.json.root.children);

    await eSForestManager.submitFeEditorMultioperation()
    currentDialog.value = undefined
}

onBeforeUnmount(() => {
    forestMenuList.value.map((i: any) => i.status = "none")
})

d.dispose(eSForestManager.clearESForestWindowEvent.disposableOn(() => {
    menuListRef.value = []
    forestMenuList.value.map((i: any) => i.status = "none")
}))

</script>

<style scoped>
.box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    /* padding: 15px; */
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.cimrts-scenetree {
    height: 320px;
    width: 100%;
    /* background-color: pink; */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border-bottom: 2px solid #EEEEEE;
}

.tree-content {
    width: 100%;
    height: 270px;
}

.submit {
    margin-right: 10px;
    margin-bottom: 10px;
}

.cimrts-info {
    width: calc(100% - 40px);
    height: calc(100% - 380px);

}

.item1 {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
}
</style>